/**
 * 系统管理 菜单管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体内容 -->
    <el-row>
      <!-- title -->
      <div class="modt-box">菜单管理</div>
      <el-col :span="4"> </el-col>
      <el-col :span="6">
        <div class="mod-btnbox">
          <el-button size="small" type="primary"
          @click="expandPackUp(true)">全部展开</el-button>
          <el-button size="small" type="primary"
          @click="expandPackUp(false)">全部压缩</el-button>
        </div>
        <treeModule
          ref="tree"
          :defaultExpandAll="defaultExpandAll"
          :defaultProps="defaultProps"
          :treeData="treeData"
          :checkStrictly="true"
          :showSheckbox="true"
          @changeList="changeList"
          @nodeclick="nodeclick"
          @handleClick="handleClick">
        </treeModule>

      </el-col>
      <el-col :span="18">
        <div class="mod-btnbox">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="addModule">添加</el-button>
        </div>
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="父级菜单" prop="parentId">
            <el-select size="small" v-model="form.parentId" placeholder="请选择" class="selectw">
              <el-option v-for="parm in fmenu" :key="parm.id" :label="parm.name" :value="parm.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜单名称" prop="moduleName">
            <el-input size="small" v-model="form.moduleName"></el-input>
          </el-form-item>
<!--          <el-form-item label="图标" prop="moduleIcon">-->
<!--            <el-input size="small" v-model="form.moduleIcon"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item label="图标" prop="moduleIcon">
            <IconChose :chooseIcons="form.moduleIcon" @setIcon="setIcon"></IconChose>
          </el-form-item>
          <el-form-item label="URL" prop="moduleUrl">
            <el-input size="small" v-model="form.moduleUrl"></el-input>
          </el-form-item>
          <el-form-item label="顺序" prop="moduleOrder">
            <el-input size="small" v-model="form.moduleOrder"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="saveModule('form')">保存</el-button>
            <el-button size="small" type="primary" v-show="showdelete" @click="deleteModule">删除</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  ModuleList,
  ModuleGet,
  ModuleNodes,
  ModuleSave,
  ModuleDelete
} from '../../api/apiUrl'
import IconChose from '@/components/IconChose.vue'
import treeModule from '@/components/treeModule.vue'
export default {
  components:{
    IconChose,
    treeModule,
  },
  data() {
    return {
      showdelete: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      form: {
        addUser: '',
        editUser: '',
        addTime: '',
        editTime: '',
        moduleId: '',
        parentId: '',
        moduleLevel: '',
        systemNo: '',
        isLeaf: '',
        fullIndex: '',
        moduleIcon: '',
        moduleOrder: '',
        moduleName: '',
        moduleNotes: '',
        moduleUrl: ''
      },
      // rules表单验证
      rules: {
        parentId: [
          { required: true, message: '请选择父级菜单', trigger: 'blur' }
        ],
        moduleName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        moduleIcon: [
          { required: true, message: '请选择菜单图标', trigger: 'blur' }
        ],
        moduleUrl: [{ required: true, message: '请输入URL', trigger: 'blur' }],
        moduleOrder: [
          { required: true, message: '请输入菜单顺序', trigger: 'blur' }
        ]
      },
      fmenu: [],
      formInline: {
        page: 1,
        pagenum: 10,
      },
      defaultExpandAll: true,
    }
  },
  /**
   * 创建完毕
   */

  created() {
    this.getData()
    this.getmenu()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    setIcon(icon){
      console.log(icon)
      this.form.moduleIcon=icon;//将i的样式设为选中的样式el-icon-xxx
    },
    // 获取数据
    getData() {
      // 虚拟数据start
      this.treeData = [
        {
          id: 1,
          pId: 0,
          name: '平台顶级',
          open: true,
          checked: false,
          moduleId: 1
        },
        {
          id: 2,
          pId: 1,
          name: '一层',
          open: true,
          checked: false,
          moduleId: 2
        },
        {
          id: 3,
          pId: 1,
          name: '一层',
          open: true,
          checked: false,
          moduleId: 3
        },
        {
          id: 4,
          pId: 1,
          name: '一层',
          open: true,
          checked: false,
          moduleId: 4
        },
        {
          id: 5,
          pId: 1,
          name: '一层',
          open: true,
          checked: false,
          moduleId: 5
        },
        {
          id: 6,
          pId: 1,
          name: '一层',
          open: true,
          checked: false,
          moduleId: 6
        },
        {
          id: 7,
          pId: 2,
          name: '二层',
          open: true,
          checked: false,
          moduleId: 7
        },
      ]
      console.log('this.treeData',this.treeData)
      // 虚拟数据end

      // this.apiUrl.ModuleList()
      //   .then(res => {
      //     const { code, data, msg } = res.data;
      //     if(code == 0){
      //       this.treeData = data.list || []
      //     }else{
      //       this.showMessageMin({
      //         type: 'error',
      //         message: msg || '获取菜单管理列表失败，请稍后再试！'
      //       })
      //     }
      //   })
      //   .finally(() => {
      //     this.loading = false
      //   })
    },
    // 添加
    addModule() {
      this.showdelete = false
      this.form.addUser = ''
      this.form.editUser = ''
      this.form.addTime = ''
      this.form.editTime = ''
      this.form.moduleId = ''
      this.form.parentId = ''
      this.form.moduleLevel = ''
      this.form.systemNo = ''
      this.form.isLeaf = ''
      this.form.fullIndex = ''
      this.form.moduleIcon = ''
      this.form.moduleOrder = ''
      this.form.moduleName = ''
      this.form.moduleNotes = ''
      this.form.moduleUrl = ''
    },
    // 获取父级菜单
    getmenu() {
      // 虚拟数据start
      this.fmenu = [
        {
          id:1,
          name:'测试父级菜单1'
        },
        {
          id:2,
          name:'测试父级菜单2'
        }
      ]
      // 虚拟数据end

      // this.apiUrl.ModuleNodes(this.formInline,"POST")
      //   .then(res => {
      //     const { code, data, msg} = res.data;
      //     if(code == 0){
      //       this.fmenu = data.list || []
      //       this.getData()
      //       this.getmenu()
      //     } else {
      //       this.showMessageMin({
      //         type: 'error',
      //         message: msg || '父级菜单列表获取失败，请稍后再试！'
      //       })
      //     }
      //   })
    },
    // 复选变单选
    handleClick(data, checked) {
      this.showdelete = checked
    },
    // 点击节点
    nodeclick(obj, node, self) {
      this.form = obj
    },
    expandPackUp(defaultExpandAll){
      this.defaultExpandAll = defaultExpandAll
    },
    changeList(arr){
      console.log('arr', arr)
      // this.treeData = arr
    },
    // 保存菜单
    saveModule(editData) {
      this.showMessageMin({
        type: 'error',
        message: '菜单管理列表保存失败，请稍后再试！'
      })
      this.addModule();
      this.$refs[editData].validate(valid => {
        if (valid) {
          this.apiUrl.ModuleSave(this.form,"GET")
            .then(res => {
              const { code, msg} = res.data;
              if(code == 0){
                this.getData()
                this.getmenu()
              } else {
                this.showMessageMin({
                  type: 'error',
                  message: msg || '菜单管理列表保存失败，请稍后再试！'
                })
              }
            })
        } else {
          return false
        }
      })
    },
    // 删除菜单
    deleteModule() {
      this.apiUrl.ModuleDelete(
        {
          moduleId: this.form.moduleId
        },"POST")
        .then(res => {
          const { code, msg} = res.data;
          if(code == 0){
            this.getData()
            this.getmenu()
          } else {
            this.showMessageMin({
              type: 'error',
              message: msg || '菜单管理列表删除成功！'
            })
          }
        })
    }
  }
}
</script>

<style lang="less" scoped>
.user-search {
  margin-top: 20px !important;
}
.user-search td {
  margin-top: 20px !important;
}
.userRole {
  width: 100%;
}
.el-table__expanded-cell {
  padding: 0px !important;
  margin: 0px !important;
}
.modt-box {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f0f2f5;
  text-align: center;
  color: #637085;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 24px;
}
.mod-btnbox {
  margin-bottom: 20px;
}
.selectw {
  width: 100%;
}
</style>

